<template>
   <div class="container" >
        <div class="titleLayer">
            <div class="titleLayer-name">
                <span class="titleLayer-name-zh">视频摘要 |</span>
                
                <span class="titleLayer-name-en">Automatically extract key information from videos through AI and intelligently summarize video summaries</span>
            </div>    
            <div  class="titleLayer-description">这个Demo演示通过AI大模型对视频画面和语言进行分析，根据内容对视频进行自动切片并生成对应的章节标题和内容摘要。</div>
        </div>

        <div class="contentLayer">
            <div class="contentLayer-video">
                <div class="contentLayer-video-outBox">
                    <div class="contentLayer-video-inBox">
                        <video ref="myVideo" width="525px" height="320px" controls>
                            <source src="https://sam-test.oss-cn-beijing.aliyuncs.com/talkcloud_resource/videos/AI%E8%AF%BE%E5%88%B6%E4%BD%9C%E8%BF%87%E7%A8%8B%E4%BB%8B%E7%BB%8D.mp4" type="video/mp4">
                            </video>
                    </div>
                </div>
            </div>
            <div class="contentLayer-info">
              
                <div  class="contentLayer-info-group">
                    <div class="contentLayer-info-group-item" v-for="(i,index) in contentInfoArr" :key="index">
                        <div class="contentLayer-info-group-item-title">
                            <div class="contentLayer-info-group-item-title-group">
                                <div class="contentLayer-info-group-item-title-name">{{i.title}}</div>
                                <div class="contentLayer-info-group-item-title-duration">开始于：{{i.start}}s / 停止于：{{i.end}}s</div>
                                <div class="contentLayer-info-group-item-play-btn" @click="seek2Time(i.start)">▶️</div>
                            </div>
                            
                        </div>
                        <div class="contentLayer-info-group-item-description">{{i.description}}</div>
                    </div>
                </div>
            </div>
        </div>
        
   </div> 
</template>

<script>
export default {
    name: 'MonitorPanel',
  props: {
    msg: String
  },
  data () {
    return {
    
      
      contentInfoArr:[
        {"title":"第一个标题","start":0,"end":121,"description":"第一个标题对应的描述信息"},
        {"title":"第二个标题","start":121,"end":227,"description":"第二个标题对应的描述信息"}
      ],
    }
  },
  methods:{
    seek2Time(time){
        console.log(time)
       this.$refs.myVideo.currentTime=time
       this.$refs.myVideo.play()
    }
    
  } 
}
</script>

<style scoped>
.container{
   background:#0d1c30;
   display:flex;
   flex-direction:column;
   justify-content: flex-start;
}
.titleLayer {
    display: flex;
    padding: 10px;
    background: #0d1c30;
    justify-content: flex-start;
    
}
.titleLayer-name {
    display: flex;
    border-radius: 10px;
    border: 5px solid #0480ce;
    background-color: #0d1c30; /* 背景颜色 */
    margin: 50px 0;
    box-shadow: inset 0 0 20px rgba(4, 108, 206, 0.8); /* 内发光效果 */
    color:#fff;
   width:350px;
   z-index: 2;
}

.titleLayer-name-zh{
    margin: 15px 0;
    font-size: 20px;
    color:#fff;
    font-weight: bold;
    flex: 2;
}
               
.titleLayer-name-en{
    margin: 10px 20px 0 -10px;
    font-size: 10px;
    color:#fff;
    flex:3;
    text-align: left;
}

.titleLayer-description{
    display: flex;
    margin:50px 10px 50px -20px;
    border-radius: 10px;
    border-bottom: 1px solid #9abfd6;
    background-color: #0d1c30; /* 背景颜色 */
    box-shadow: inset 0 0 20px rgba(4, 108, 206, 0.8); /* 内发光效果 */
    color:#fff;
    font-size:12px;
    height: auto;
    padding:0 50px;
    align-items: center;
    font-weight: 550;
    text-align: left;
    z-index: 1;
}

.contentLayer {
    display: flex;
    justify-content: flex-start;
    padding: 10px;
 
}
.contentLayer-video{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 10px;
    
}
.contentLayer-video-outBox{
    border-radius: 10px;
    border: 5px solid #0480ce;
    box-shadow: inset 0 0 20px rgba(4, 108, 206, 0.8); /* 内发光效果 */
}
.contentLayer-video-inBox{
    border-radius: 10px;
    border: 1px solid #0480ce;
    background-color: #0d1c30; /* 背景颜色 */
    margin: 10px;
    padding: 2px;
}

.contentLayer-info{
 border-radius: 10px;
    border: 1px solid #0480ce;
    box-shadow: inset 0 0 20px rgba(4, 108, 206, 0.8); /* 内发光效果 */
    background-color: #0d1c30; /* 背景颜色 */
    display: flex;
    flex-direction: column;
}


.contentLayer-info{
 width:600px;   
 display: flex;
 justify-content: flex-start;
 align-items: flex-start;
 flex-direction: column;
}

.contentLayer-info-btn{
    margin:30% 30%; 
}

.contentLayer-info-group{
    
}

.contentLayer-info-group-item{
    display: flex;
    flex-direction: column;
    font-size:10pt;
    background-color: #3a5e8e45; /* 背景颜色 */
    margin: 20px;
    padding: 10px;
}
.contentLayer-info-group-item-title{
    color:#fff;
 
}

.contentLayer-info-group-item-title-group{
    display: flex;
    flex-direction: row;
    color:#fff;
    justify-content: flex-start;
}

.contentLayer-info-group-item-title-name{
    font-weight: 550;
    margin-right:100px;
}

.contentLayer-info-group-item-title-duration{
    color:#fff;
   margin-right:50px;
}

.contentLayer-info-group-item-play-btn{
    color:#fff;
    margin-right:100px;
    cursor: pointer;
}

.contentLayer-info-group-item-description{
    color:#fff;
    text-align: left;
    margin-top:20px; 
}

</style>
